<template>
	<view>
		<view class="top">
			<view class="info">
				<view class="avt" :style="avt"></view>
				<view v-if="nickname == null" @tap="userInfoHandler()">点击授权登录</view>
				<view v-else class="nickname">Hi~ {{ nickname }}</view>
			</view>
			<view class="shoucang">
				<view class="item" @tap="gotoDetail('zujian')">
					<view>{{ zujian }}</view>
					<view>我的组件</view>
				</view>
				<view class="item" @tap="gotoDetail('zhuji')">
					<view>{{ zhuji }}</view>
					<view>我的主机</view>
				</view>
				<view class="item" @tap="gotoDetail('article')">
					<view>{{ article }}</view>
					<view>收藏文章</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="title">
				<span>附近电脑店</span>
				<view @tap="changelocation" class="tapbutton">更改位置</view>
			</view>
			<view style="width: 89vw; height: 40vh; margin: 1vh auto">
				<map v-if="showmap" style="width: 89vw; height: 40vh" show-scale show-location :latitude="latitude"
					:longitude="longitude" :markers="markers"></map>
			</view>
		</view>
		<view class="cu-list menu shadow-lg">
			<view class="cu-item arrow" @click="goToSuggestion">
				<view class="content">
					<text class="cuIcon-calendar text-blue" style="font-size: 20px"></text>
					<text>意见反馈</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="goToAbout">
				<view class="content">
					<text class="cuIcon-friendfill text-blue" style="font-size: 20px"></text>
					<text>联系我们</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname: null,
				avt: null,
				article: null,
				zujian: null,
				zhuji: null,
				userInfo: null,
				docs: null,
				setData() {},

				title: "map",
				latitude: 39.909,
				longitude: 120.39742,
				markers: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
				tmp: [],
				showmap: false,
				isChangeLocation: true
			};
		},
		onLoad(options) {
			const db = wx.cloud.database();
			// console.log(111);
			//js异步操作
			db.collection('docavt').get().then(res => {
				this.setData({
					docs: res.data
				})
			});
		},
		//切换位置之后又在onShow里面进行了重置，故切换定位失败
		onShow() {
			if (wx.getStorageSync("nickName") != "") {
				this.nickname = wx.getStorageSync("nickName");
				this.avt = "background-image:url(" + wx.getStorageSync("avt") + ")";
			} else {
				// this.gotoUserInfo()
			}
			this.article = getApp().globalData.userdata.article.length;
			this.zujian = getApp().globalData.userdata.zujian.length;
			this.zhuji = getApp().globalData.userdata.zhuji.length;
			if (this.isChangeLocation) {
				var self = this;
				// uni.getLocation({
				// 	type: "gcj02",
				// 	success: function(res) {
				// 		//longitude，当前位置的经度
				// 		self.longitude = res.longitude;
				// 		//latitude，当前位置的纬度
				// 		self.latitude = res.latitude;
				// 		self.huodezhouwei(self.latitude, self.longitude);
				// 	},
				// });
			}
		},

		methods: {
			gotoUserInfo() {
				uni.navigateTo({
					url: "./getUserInfo/getUserInfo"
				})
			},
			gotoDetail(name) {
				uni.navigateTo({
					url: "./details/details?name=" + name,
				});
			},
			goToAbout() {
				uni.navigateTo({
					url: "../../subpkg/about/about",
				});
			},
			goToSuggestion() {
				uni.navigateTo({
					url: "../../subpkg/suggestion/suggestion",
				});
			},
			async userInfoHandler() {
				var res = await uni.getUserProfile({
					desc: "用于完善用户信息",
				});
				//       this.avt = "background-image:url(" + res[1].userInfo.avatarUrl + ")";
				//       // this.nickname = res[1].userInfo.nickName;
				// this.nickname = res[1].userInfo.nickName;
				//       wx.setStorageSync("avt", res[1].userInfo.avatarUrl);
				//       wx.setStorageSync("nickName", res[1].userInfo.nickName);
				this.gotoUserInfo()
			},


			async huodezhouwei(la, lo) {
				var that = this;
				var QQMapWX = require("untiljs/qqmap-wx-jssdk.min.js");
				var qqmapsdk = new QQMapWX({
					key: "UFHBZ-EFWLX-KYC4U-TJDGT-VGNX7-PIBKP",
				});
				await qqmapsdk.search({
					keyword: "电脑",
					//location就是搜索的中心位置，在调整位置之后将这个经纬度位置进行进行一个调整
					//调整之后按照逻辑应该就可以显现出来了
					location: la + "," + lo,
					success: function(res) {
						that.tmp = res.data;
						console.log(res.data);
						for (var i = 0; i < res.data.length; i++) {
							that.markers[i].latitude = that.tmp[i].location.lat;
							that.markers[i].longitude = that.tmp[i].location.lng;
							that.markers[i].id = i;
							that.markers[i].name = that.tmp[i].title;
							that.markers[i].height = 27;
							that.markers[i].width = 26;
							that.markers[i].iconPath = "/static/GPS.png";
						}
						that.showmap = true;
					},
				});
			},
			changelocation() {
				this.isChangeLocation = false
				var self = this;
				wx.chooseLocation({
					success: (res) => {
						self.latitude = res.latitude;
						self.longitude = res.longitude;
						self.huodezhouwei(self.latitude, self.longitude);
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.top {
		background-color: white;
		margin-bottom: 3vh;
	}

	.bottom {
		background-color: white;
		padding: 3vh 5vw;
		text-align: center;

		.title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			span {
				font-weight: bold;
			}

			.tapbutton {
				border: 1px solid #b4b4b4;
				padding: 4px;
				border-radius: 10px;
				font-size: 12px;
			}
		}
	}

	.info {
		padding: 3vh 10vw;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.avt {
			width: 60px;
			height: 60px;
			border-radius: 100%;
			background-size: 100%;
			margin-right: 5vw;
		}

		.nickname {
			font-weight: bold;
		}
	}

	.shoucang {
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		.item {
			text-align: center;
			padding-bottom: 2vh;
		}

		.item :first-child {
			color: #1296db;
			margin-bottom: 1vh;
		}
	}
</style>